<template>
  <div class="left_content">
    <!-- 商品总数 -->
    <div class="goodsTotol">
      <span
        >共
        <i class="curfive">5</i>
        件</span
      >
    </div>
    <!-- 商品内容区域 -->
    <div class="goodsContent">
      <div class="goodsTop">
        <div class="goodsNav" v-for="item in totolList" :key="item.id">
          <span>{{ item.name }}</span>
          <span>{{ item.price }}</span>
          <span>{{ item.totol }}</span>
          <i
            class="el-icon-remove-outline goodsNavI"
            @click="deleteNavList(item)"
          ></i>
        </div>
      </div>
      <div class="empty">
        <div class="emptyBox emptyBox1">清空</div>
        <div class="emptyBox">挂单</div>
      </div>
    </div>
    <!-- 来宾 -->
    <div class="laibin">
      <i class="el-icon-user-solid laibinI"></i>
      <div class="laibinBottom">
        <div>来宾</div>
        <div>
          <span>余额：0</span>
          <span> 积分：0</span>
        </div>
      </div>
    </div>
    <!-- 收款 -->
    <div class="money">收 款 &nbsp;&nbsp; ¥{{ fullTotll }}</div>
  </div>
</template>

<script>
export default {
  name: "lefr_menu",
  data() {
    return {
      totolList: [
        {
          category: "面包类",
          id: "12691691",
          image: "https://www.vcaimao.com/f2/prd.jpg",
          name: "红豆奶酱",
          price: 7,
          totol: 1,
        },
      ],
    };
  },
  computed: {
    fullTotll() {
      let num = 0;
      this.totolList.forEach((item) => {
        return (num += item.price);
      });
      return num;
    },
  },
  mounted() {
    this.$bus.$on("addNavList", (data) => {
      // const num = this.totolList.filter((item) => {
      //   return item.id == data.id;
      // });
      // if (num.length > 0) {
      //   num.map((item) => {
      //     return {
      //       ...item,
      //       totol: item.totol++,
      //     };
      //   });
      //   this.totolList.forEach((i) => {
      //     if (i.id == item.id) {
      //       i.totol++;
      //     }
      //   });
      // } else {
      //   this.totolList.push(data);
      // }
      // console.log(data);
      this.totolList.push({
        ...data,
        totol: 1,
      });
    });
  },
  methods: {
    deleteNavList(item) {
      this.totolList.forEach((i, index) => {
        if (i.id == item.id) {
          this.totolList.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style>
.left_content {
  width: 15%;
  height: 100%;
  background: green;
}
.goodsTotol {
  height: 5%;
  background: hsl(191deg 37% 88%);
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 20px;
  color: hsl(193deg 83% 43%);
}
.curfive {
  color: red;
}
.goodsContent {
  position: relative;
  height: 80%;
  background: hsl(0deg 0% 100%);
  font-size: 12px;
}
.goodsNav {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid hsl(0deg 0% 93%);
  cursor: pointer;
}
.goodsNav:hover {
  background: hsl(92deg 50% 53%);
}
.goodsNavI {
  color: hsl(0deg 100% 75%);
  font-size: 18px;
}

.empty {
  position: absolute;
  display: flex;
  width: 100%;
  height: 40px;
  bottom: 0;
  border-top: 1px solid hsl(0deg 0% 88%);
}
.emptyBox1 {
  border-right: 1px solid hsl(0deg 0% 88%);
}
.emptyBox {
  flex: 1;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: hsl(0deg 0% 64%);
}
.emptyBox:hover {
  color: red;
}

.laibin {
  height: 40px;
  background-color: hsl(93deg 50% 91%);
  color: hsl(99deg 36% 51%);
  display: flex;
  justify-content: start;
  font-size: 12px;
}
.laibinI {
  font-size: 30px;
}
.money {
  cursor: pointer;
  background: hsl(0deg 100% 67%);
  color: white;
  text-align: start;
  padding-left: 10px;
  line-height: 72px;
  height: 72px;
  font-size: 20px;
}
</style>